@import '../../common/scss/variable.scss';

header {
  position: relative;
  width: 100%;
  height: $header-height;

  .icon {
    position: absolute;
    left: 30px;
    top: 50%;
    transform: translateY(-50%);
    font-size: $font-size-xxxl;
    font-weight: bold;
    color: $color-text;
    cursor: pointer;
    transition: all 0.5s;

    &:hover {
      color: $color-theme;
    }
  }

  nav {
    position: absolute;
    margin: 0;
    right: 30px;
    top: 50%;
    transform: translateY(-50%);

    a {
      display: inline-block;
      margin: 0 5px;
      font-size: $font-size-x;
      color: $color-text-gray;
      text-decoration: none;
      transition: all 0.3s;

      &:hover {
        color: $color-theme;
      }
    }

    .active {
      color: $color-theme;
    }
  }
}